<template>
  <div>
    <h3>案例-渲染几个分类</h3>
    <hr />
    <Cate title="美食">
      <img :src="foodUrl" alt="" />
    </Cate>

    <Cate title="游戏">
      <ul>
        <li v-for="item in gameArr" :key="item">
          <span>{{ item }}</span>
        </li>
      </ul>
    </Cate>

    <Cate title="电影">
      <video controls :src="movieUrl"></video>
    </Cate>

    <cate title="随便"></cate>
  </div>
</template>

<script>
import Cate from '../components/Cate.vue'

export default {
  data() {
    return {
      foodUrl: 'https://s3.ax1x.com/2021/01/16/srJlq0.jpg',
      gameArr: ['英雄联盟手游', '劲舞团', '红色警戒'],
      movieUrl: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
    }
  },
  components: {
    Cate
  }
}
</script>

<style lang="less" scoped></style>
